<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="da">
        <header>
            <span>左边</span>
            <span>右边</span>
        </header>
        <div class="xiao">
            <div class="zuo">
                <div class="shang">

                </div>
                <div class="xia">

                </div>
            </div>
            <div class="you">

            </div>
        </div>
    </div>
</body>

</html>
<style lang="scss">
    .da {
        width: 100%;
        height: 1000px;
        /* background: pink; */
    }

    span {
        color: red;
    }

    p {
        color: red;
    }

    .shang {
        width: 100%;
        height: 100px;
        background: blue;
    }

    .xia {
        width: 100%;
        height: 100px;
        background: gold;
    }

    header {
        height: 60px;
        background: #000;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    .xiao {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .zuo {
        width: 300px;
        background: yellow;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .you {
        flex: 1;
        background: red;
    }
</style>